import Konva from 'konva'

const contourGroup = new Konva.Group()

const contourPoint = [
  [100, 100, 600, 100], // 1
  [600, 100, 600, 350], // 2
  [600, 350, 1600, 350], // 3
  [1600, 350, 1600, 860], // 4
  [1600, 860, 1100, 860], // 5
  [1100, 860, 1100, 450], // 6
  [1100, 450, 100, 450], // 7
  [100, 450, 100, 100], // 8
]

// 绘制地图轮廓
contourPoint.map((item) => {
  const line = new Konva.Line({
    stroke: '#68c6ff',
    strokeWidth: 10,
    points: item,
    lineCap: 'round',
  })
  contourGroup.add(line)
})

const barcodeGroup = new Konva.Group()

export const commonPoint = {
  data: [
    { id: 1, x: 300, y: 400 },
    { id: 2, x: 900, y: 400 },
    { id: 3, x: 1200, y: 400 },
    { id: 4, x: 1500, y: 400 },
    { id: 5, x: 1200, y: 700 },
    { id: 6, x: 1500, y: 700 },
  ],
  link: ['1-2', '2-3', '3-4', '3-5', '4-6'],
}

export const getPointXY = (id, agvID) => {
  const findPoint = (val) => commonPoint.data.find((item) => item.id === val)

  if ([1].includes(id)) return findPoint(1)
  if ([42, 21].includes(id)) return findPoint(2)
  if ([29, 30].includes(id)) return findPoint(3)
  if ([56, 32].includes(id)) return findPoint(4)
  if ([27].includes(id)) return findPoint(5)
  if ([40].includes(id)) return findPoint(6)
  if ([0].includes(id)) {
    if (agvID === 1) return findPoint(1)
    if (agvID === 2) return findPoint(1)
  }
  return { x: 999999, y: 999999 }
}

// 绘制色带
commonPoint.link.forEach((item) => {
  const { x: x1, y: y1 } = commonPoint.data.find(
    ({ id }) => id === +item.split('-')[0],
  )
  const { x: x2, y: y2 } = commonPoint.data.find(
    ({ id }) => id === +item.split('-')[1],
  )
  const line = new Konva.Line({
    stroke: '#f90',
    strokeWidth: 2,
    points: [x1, y1, x2, y2],
    tension: 1,
  })
  barcodeGroup.add(line)
})

// 绘制地图点
commonPoint.data.forEach((item) => {
  const { x, y } = item
  const node = new Konva.Group({ id: String(item.id), x, y })
  const rect = new Konva.Rect({
    cornerRadius: 0.5,
    fill: '#e33',
    height: 10,
    offset: { x: 5, y: 5 },
    width: 10,
  })
  const path = new Konva.Path({
    data: 'M0 0h78.77v1024H0z M157.54 0v1024h157.54V0zM393.85 1024h78.77V0H393.85zM551.38 0v1024h157.54V0zM787.69 0v1024h157.54V0zM1102.77 0h-78.77v1024h157.54V0z',
    fill: 'black',
    offset: { x: 600, y: 500 },
    scale: { x: 0.006, y: 0.006 },
  })
  barcodeGroup.add(node.add(rect).add(path))
})

const markGroup = new Konva.Group()

const markPoint = [
  { id: '充电室', x: 300, y: 300 },
  { id: '升降台', x: 1200, y: 800 },
  { id: '清洗架', x: 1500, y: 800 },
]

markPoint.map((item) => {
  const node = new Konva.Group(item)
  const mark = new Konva.Text({
    fontSize: 24,
    align: 'center',
    text: item.id,
    fill: '#fff',
  })
  mark.offset({ x: mark.width() / 2, y: mark.height() / 2 })
  const rect = new Konva.Rect({
    cornerRadius: 5,
    fill: '#e33',
    height: mark.height() + 20,
    width: mark.width() + 20,
  })
  rect.offset({ x: rect.width() / 2, y: rect.height() / 2 + 2 })
  markGroup.add(node.add(rect).add(mark))
})

export const mapInfoGroup = new Konva.Group()

mapInfoGroup.add(contourGroup).add(barcodeGroup).add(markGroup)
